<template>
	<ComModal ref="ComModalRef" :title="form?.id ? $t('base.update') : $t('base.add')">
		<div class="add-group">
			<ComTitle title2="图标和名称" title3="选择字段的图标和输入字段的名称"></ComTitle>
			<a-form :model="form" ref="formRef" auto-label-width>
				<a-form-item validate-trigger="input" field="name" :rules="[{ required: true, message: $t('base.placeholder') + $t('dataModel.dataModel') }]" hide-label required hide-asterisk>
					<ComIconSelect v-model="form.ico" />
					<a-input v-model="form.name" style="flex: 1; margin-left: 12px" :placeholder="$t('dataModel.dataModel')" />
				</a-form-item>
			</a-form>
		</div>
		<template #footer>
			<a-button type="primary" @click="addGroup" :loading="loading">确认</a-button>
		</template>
	</ComModal>
</template>

<script setup lang="ts">
import ComIconSelect from "@/components/ComIconSelect.vue";
import ComModal from "@/components/ComModal.vue";
import { bizAdd, bizUpdate } from "@/api/customerManage/setting";
const message = useMessage();
const emit = defineEmits(["update"]);
const ComModalRef = ref({});
const form = ref({
	name: "",
	ico: "",
	menuType: 0
});

const props = defineProps({
	menuType:{
		type:Number,
		default:0
	}
})

const loading = ref(false);
const formRef = ref({});
const addGroup = async () => {
	const data = await formRef.value.validate();
	if (data) return;
	if (!form.value.ico) return message.error("请选择图标");
	try {
		loading.value = true;
		updateFn(form.value);
		ComModalRef.value.close();
	} catch (error) {
	} finally {
		loading.value = false;
	}
};

const updateFn = async (data) => {
	const api = data.id ? bizUpdate : bizAdd;
	await api({
		...data,
		menuType:props.menuType,
		bizId: data?.id 
	});
	emit("update");
};
const edit = (data) => {
	form.value = JSON.parse(JSON.stringify(data));
	ComModalRef.value.open();
};

defineExpose({
	edit,
	updateFn
});
</script>

<style scoped lang="scss"></style>
